<template>
    <view>
        <view class="search-box block">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input class="search-input" confirm-type="search" placeholder="搜索" @input="searchInput" v-model="searchText" />
        </view>
        <view class="tab-radius">
            <tab-radius :list="['已投保客户', '未投保客户']" :active="analysisActive" @change="onInsuranceTab" />
        </view>
        <view class="record">
            <view> 共有{{ analysisActive === 0 ? completeCount : expireCount }}条记录 </view>
            <view class="record-box">
                <picker mode="selector" :range="selectorList" @change="onSelectInsurance">
                    <div class="flex">
                        <view>排序</view>
                        <image class="sort-img" src="../../static/home/sort.png" />
                    </div>
                </picker>
            </view>
        </view>
        <view class="record-list" v-if="analysisActive === 0">
            <no-data v-if="completeList.length === 0" />
            <reminderHtml type="pay" isash="1" :item="item" v-for="(item, index) in completeList" :key="index"
                @detail="onGoDetail" />
        </view>
        <view class="record-list" v-if="analysisActive === 1">
            <no-data v-if="expireList.length === 0" />
            <reminderHtml type="pay" isash="1" :item="item" v-for="(item, index) in expireList" :key="index"
                @detail="onGoDetail" />
        </view>
    </view>
</template>
<script setup lang="ts">
import { onReachBottom } from '@dcloudio/uni-app'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import reminderHtml from '@/components/reminder-html/index.vue'
import { getInsureComplete, getInsureExpire, GetInsureCompleteDto } from '@/api/reminder'
import noData from '@/components/no-data/no-data.vue'
import user from '@/utils/user'
const props = defineProps(['tabIndex'])
const analysisActive = ref(0)
const searchText = ref('')
const completeList = ref([] as GetInsureCompleteDto[])
const completeNextPage = ref(true)
const completePageNum = ref(1)
const expireList = ref([] as GetInsureCompleteDto[])
const expireNextPage = ref(true)
const expirePageNum = ref(1)
const selector = ref(0)
const loadingflag = ref(false)
const selectorList = ref([
    '账户余额降序',
    '账户余额升序',
    '开通时间倒序',
    '开通时间正序'
])
const completeCount = ref(0)
const expireCount = ref(0)
const searchInput = () => {
    if (analysisActive.value === 0) {
        completeList.value = []
        completePageNum.value = 1
        completeNextPage.value = true
        getInsureCompleteList()
    } else {
        expireList.value = []
        expirePageNum.value = 1
        expireNextPage.value = true
        getInsureExpireList()
    }
}
const onGoDetail = (event: { id: number, dealId: number }) => {
    uni.navigateTo({
        url: '/packageRemind/pages/gcpa-insurance-detail/index?id=' + event.id + '&type=2' + '&dealId=' + event.dealId
    })
    console.log(event, 'event')
}
onMounted(() => {
    loadingflag.value = true
})
onBeforeUnmount(() => {
    loadingflag.value = false
})
// 到达底部
onReachBottom(() => {
    if (loadingflag.value) {
        if (analysisActive.value === 0 && props.tabIndex === 4) {
            if (!completeNextPage.value) {
                return
            }
            completePageNum.value += 1
            getInsureCompleteList()
        } else if (analysisActive.value === 1 && props.tabIndex === 4) {
            if (!expireNextPage.value) {
                return
            }
            expirePageNum.value += 1
            getInsureExpireList()
        }
    }
})
// 日日保排序
const onSelectInsurance = (event: { detail: { value: number } }) => {
    const { value } = event.detail
    console.log(value, 'event')
    selector.value = value
    searchInput()
}
const onInsuranceTab = (index: number) => {
    analysisActive.value = index
}
const getInsureCompleteList = async () => {
    const result = await getInsureComplete({
        pageNum: completePageNum.value,
        searchText: searchText.value,
        sortOrder: selector.value,
        pageSize: 50,
        productType: 6
    })
    if (!result.hasNextPage) {
        completeNextPage.value = false
    }
    const arr = []
    arr.push(...completeList.value)
    arr.push(...result.list)
    completeList.value = arr
    completeCount.value = result.totalCount
    console.log(result, '已投保列表')
}
const getInsureExpireList = async () => {
    const result = await getInsureExpire({
        pageNum: expirePageNum.value,
        searchText: searchText.value,
        sortOrder: selector.value,
        pageSize: 50,
        productType: 6
    })
    if (!result.hasNextPage) {
        expireNextPage.value = false
    }
    const arr = []
    arr.push(...expireList.value)
    arr.push(...result.list)
    expireList.value = arr
    expireCount.value = result.totalCount
    console.log(result, '未投保列表')
}

onMounted(async () => {
    await user.waitLogin()
    getInsureCompleteList()
    getInsureExpireList()
})
</script>
<style lang="scss" scoped>
.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;
}

.record {
    padding: 0 30rpx;
    @include flex-between;
    color: $grey;
    font-size: $font-normal;
    margin-top: 30rpx;

    .record-box {
        @include flex-between;
        color: #565868;
        font-size: $font-normal;
        margin-left: 34rpx;
    }
}

.tab-radius {
    padding: 0rpx 30rpx;
}

.sort-img {
    width: 28rpx;
    height: 28rpx;
    margin-left: 8rpx;
}
</style>
